<template>
  <!--学科论坛-->
  <div class="academicBBS">
    <!--统一样式-->
    <div class="academicBBS_title">
      <div class="academicBBS_title_icon">
        <img src="./../../../assets/home/xuekeluntan.svg" alt="" />
      </div>
      <p class="academicBBS_title_font">学科论坛</p>
      <div class="academicBBS_title_more" @click="handelLessons">
        更多 <i class="el-icon-d-arrow-right"></i>
      </div>
    </div>
    <!--内容-->
    <div class="academicBBS_content">
      <div
        class="academicBBS_content_table"
        v-for="item in topicList"
        :key="item.id"
        @click="handelDetail(item.id)"
      >
        <p class="academicBBS_content_table_left">{{ item.title }}</p>
        <p class="academicBBS_content_table_right">{{ item.createdAt }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getHomeTopicList } from "@/api/home";
import { getCookie } from "@/utils/auth";
export default {
  name: "academicBBS",
  data() {
    return {
      isUser: true, // true是未登录
      topicList: [],
      topicData: {
        page: 1,
        size: 4,
      },
    };
  },
  created() {
    this.isUser = !getCookie("username");
  },
  mounted() {
    this.getHomeTopicList();
  },
  methods: {
    getHomeTopicList() {
      getHomeTopicList(this.topicData).then((response) => {
        if (response.data.code === 20000) {
          const { list } = response.data.results;
          this.topicList = list ? list : [];
        }
      });
    },
    // 更多
    handelLessons() {
      this.$router.push({
        path: "/forum/article",
        query: {
          routerName: "学科论坛",
        },
      });
    },
    handelDetail(id) {
      if (!this.isUser) {
        this.$router.push({
          path: "/forum/forumContent",
          query: {
            routerName: "文章详情",
            id,
          },
        });
      } else {
        this.$message({
          message: "查看详细论坛需要登录，请登录后查看",
          type: "warning",
        });
      }
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.academicBBS {
  width: 622px;
  height: 370px;
  color: #333;
  .academicBBS_title {
    margin-top: 40px;
    display: flex;
    padding-bottom: 15px;
    border-bottom: 2px solid #0a7b19;
    .academicBBS_title_icon {
      width: 32px;
      height: 32px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .academicBBS_title_font {
      font-weight: bold;
      font-size: 24px;
      margin-left: 15px;
      width: 100px;
    }
    .academicBBS_title_more {
      font-size: 12px;
      height: 32px;
      line-height: 32px;
      text-align: right;
      width: 475px;
      cursor: pointer;
    }
  }
  .academicBBS_content {
    margin-top: 24px;
    .academicBBS_content_table {
      height: 56px;
      line-height: 56px;
      border-bottom: 1px dashed #dadada;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      transition: all 0.2s linear;
      &:hover {
        background-color: #e3e3e3;
      }
      .academicBBS_content_table_left {
        font-weight: bold;
        font-size: 18px;
      }
      .academicBBS_content_table_right {
        font-size: 14px;
        color: #808080;
      }
    }
  }
}
</style>
